<template>
  <div class="full-box">
    <!--集货区-->
    <el-row class="table-hand">
      <!--表头-->
      <a href="#" class="goods-title">车辆配送</a>
    </el-row>
    <el-row class="table-box">
      <!--列表-->
      <el-table :data="list" border stripe class="table-list">
        <el-table-column label="订单编号" property="orderId" width="120px" show-overflow-tooltip></el-table-column>
        <el-table-column label="客户名称" property="client" show-overflow-tooltip></el-table-column>
        <el-table-column label="收货地址" property="address" show-overflow-tooltip></el-table-column>
        <el-table-column label="联系人" property="consignee" width="120px"></el-table-column>
        <el-table-column label="联系人电话" property="consigneePhone" show-overflow-tooltip></el-table-column>
        <el-table-column label="选配操作" width="170px" align="center">
          <template #default="scope">
            <!--这是一个插槽,可以更好的获取整行的内容-->
            <el-button type="primary" @click="btnDriverClick(scope.row)">
              <el-icon><Flag /></el-icon>&nbsp;
              车辆驾驶员选配
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="width: 1235px; display: flex;justify-content: right">
        <el-pagination
            style="margin-top: 10px"
            v-model:current-page="data.clientPage.currentPage"
            @current-change="ordersList"
            layout="prev, pager, next"
            :page-size="5"
            :total="data.clientPage.total"
            class="page"
        />
      </el-row>
    </el-row>
  </div>

  <el-dialog
      v-model="data.dialogVisible"
      title="车辆驾驶员选配"
      width="500"
      class="dialog-box"
  >
    <el-form label-width="100px">
      <el-form-item label="订单编号">
        <el-input style="width: 220px" v-model="data.orderId" disabled></el-input>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input style="width: 220px" v-model="data.client" disabled></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input style="width: 220px" v-model="data.consignee" disabled></el-input>
      </el-form-item>
      <el-form-item label="选择配送员">
        <el-select
            v-model="data.driversId"
            placeholder="----全部配送员---"
            style="width: 220px"
        >
          <el-option
              v-for="item in data.drivers"
              :key="item.driverId"
              :label="item.driverName"
              :value="item.driverId"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirmSelection">确认</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import axios from 'axios';
import moment from "moment/moment";
import {ElMessage} from "element-plus";


//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}
const list = ref([]);

const data = reactive({
  // title: '',
  dialogVisible: false,
  client: '',
  consignee: '',
  drivers: [],
  driversId: '',
  orderId: "",
  clientPage: {
    currentPage: 1,
    total: ""
  }
})


onMounted(() => {
  ordersList();
  inCarDeliver();//获取下拉框中的信息
});

let ordersList = () => {
  axios({
    url: 'http://localhost:8080/clientDeliver/selectNotDriving',
    method: "get",
    params: {
      currentPage: data.clientPage.currentPage
    }
  }).then((res) => {
    list.value = res.data.data;
    data.clientPage.total = res.data.total;
  })
}

let btnDriverClick = (row: any) => {
  data.dialogVisible = true;
  data.orderId = row.orderId;
  data.client = row.client;
  data.consignee = row.consignee;

}
const dialogVisible = ref(false)


function inCarDeliver() {
  axios({
    url: 'http://localhost:8080/driver/selectAll',
    method: 'get'
  }).then((res) => {
    data.drivers = res.data.data;
    console.log(data.orderId);
  })
}

//更新最后操作时间
const updateDeliverTime = () => {
  axios({
    url: "http://localhost:8080/Order/updateEndTime",
    method: "post",
    params: {
      orderId: data.orderId,
      deliverTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss')
    }
  })
}

let confirmSelection = () => {
  updateInfo();//更新司机姓名和车牌

  data.dialogVisible = false;
};


//更新状态
const updateStatus = () => {
  axios({
    url: 'http://localhost:8080/deliverOrder/updateStatus',
    method: 'post',
    params: {
      orderId: data.orderId,
      statusId: 33
    }
  }).then(() => {
    updateDeliverTime();
    ordersList();
  })
}

//更新司机姓名和车牌
function updateInfo() {
  axios({
    url: 'http://localhost:8080/deliverOrder/addDriver',
    method: 'post',
    params: {
      orderId: data.orderId,
      driverId: data.driversId
    }
  }).then((res) => {
    if (res.data) {
      successMessage("分配成功");
      updateStatus();
    } else {
      errorMessage("分配失败");
    }
  })
}
</script>

<style scoped>
.table-hand {
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 20px;
  height: 70px;
  background-color: #fffefe;
  padding: 20px;
}

.goods-title {
  color: black;
  text-decoration: underline;
  text-decoration-color: coral;
  font-size: 25px;
}

.table-box {
}

.table-list {
  width: 1230px;
  display: flex;
  justify-content: center;
  margin-left: 5px;
  margin-top: 20px;
}

.full-box {
  margin: 10px;
  width: 100%;
  height: 100vh;
}

.page {
  margin-left: 5px;
}

</style>